<script>
import { defineComponent, onMounted, reactive, ref } from 'vue'

import { Select } from 'ant-design-vue'

import { getTypeOptions } from '#/api/goods/index.js'

export default defineComponent({
  components: {
    Select,
  },
  props: {
    params: Object,
  },
  setup(props) {
    const Options = ref()
    const value = ref(props.params?.value ?? '')
    const row = reactive(props.params.data)

    const getValue = () => row.purchaseName

    const handleSelectChange = () => {
      const selectedOption = Options.value.find((option) => option.value === value.value)
      if (selectedOption) {
        row.purchaseName = selectedOption.label // 更新名称
        row.purchaseType = selectedOption.value // 更新ID
        props.params.api.stopEditing()
      }
    }

    onMounted(() => {
      getTypeOptions({ page: '1', initKey: 'label' }).then((res) => {
        Options.value = res.list
      })
    })

    return {
      Options,
      value,
      row,
      getValue,
      handleSelectChange,
    }
  },
})
</script>

<template>
  <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
    <Select v-model:value="value" show-search allow-clear style="width: 100%; height: 100%" placeholder="请选择采购性质" :filter-option="false" :options="Options" @change="handleSelectChange" />
  </div>
</template>

<style scoped>
input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>
